<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!--
                使用第三方库时, 需记得 import 导入 css 文件
                enter-class
                enter-active-class
                enter-class-to

                leave-class
                leave-active-class
                leave-class-to
        -->
        <transition
                appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__zoomInLeft"
                leave-active-class="animate__zoomOutRight"
        >
            <h1 v-show="isShow">你好啊!</h1>
        </transition>
    </div>
</template>

<script>
    import 'animate.css'
    export default {
        name: "ThirdParty",
        data() {
            return {
                isShow: true
            }
        }
    }
</script>

<style scoped>

</style>